<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">
	<header class="mui-bar mui-bar-nav in-bar">    
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="index.htm" class="mui-icon mui-icon-home mui-pull-left"></a>
		<h1 class="mui-title">订阅</h1>
		<a href="javascript:void(0)" v-on:click="save()" class="mui-pull-right" style="line-height: 44px;">保存</a>
	</header> 

	<div class="mui-content bg-white">
	    <div class="mui-content-padded">
	        <div class="dy">
	        	<div class="hd">
	        		<span class="mui-icon mui-icon-plusempty"></span>
	        		全部 - 我的频道
	        		<i>长按拖动频道排序</i>
	        	</div>
	        	<div class="bd" id="sortable">
	        		<li v-for="vo in my">
	        			<div class="item" :data-no="vo.id">{{vo.title}} <span class="mui-icon mui-icon-closeempty delete"></span></div>
	        		</li>  
	        	</div>
	        </div>
	        
	        <div class="dy">
	        	<div class="hd">
	        		<span class="mui-icon mui-icon-plusempty"></span>
	        		全部 - 推荐频道
	        		<i>长按拖动频道排序</i>
	        	</div>
	        	<div class="bd" id="channel">
	        		<li v-for="vo in columns">
	        			<div class="item" :data-no="vo.id">{{vo.title}} <span class="mui-icon mui-icon-plusempty"></span></div>
	        		</li>
	        	</div>
	        </div>
	    </div>
	</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script src="js/Sortable.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
var vm = new Vue({
	el:"#app",
	data:{
		my : [],
		columns:[]
	},
	methods: {
		save: function (e) {
			
		}
	},
	created : function(){		
		that = this;
		mui.showLoading('数据加载中');
		request = {
			command:1,
			udid:uuid,
			column:'BBBB'
		};			
		mui.get(api,request,function(res){				
			mui.hideLoading();
			console.log(res);
			that.my = res.body.columns;			
			that.columns = res.body.columns2;			
		},'json');
	},
	updated : function(){
		
	}
});

</script>

<script type="text/javascript" charset="utf-8">	
$(function(){
	mui.init();
	
	var list = document.getElementById('sortable');
	var sort = new Sortable(list, {   
	    handle: "li", // 拖拽区域，默认为 items 的 子元素
	    
	    onStart: function (/**Event*/evt) { // 拖拽开始
	        var itemEl = evt.item;// 当前拖拽的html元素
	    },
	 
	    onEnd: function (/**Event*/evt) { // 拖拽结束
	        var itemEl = evt.item;
	    }    
	});
	
	mui("#channel").on("tap",".item",function () {
		var nom=jQuery(this).attr("data-no");
		var name=jQuery(this).text();
		var dingyue={USERNAME:window.localStorage.getItem("username"),COLL:nom}
		var tart=this;
		$(tart).parent().remove();
		var str='<li><div class="item" data-no="'+nom+'">'+name+' <span class="mui-icon mui-icon-closeempty delete"></span></div></li>';
		$("#sortable").append(str);

		request = {
			command:10,			
			id:nom,
			column:'AAAA',
			udid:uuid,
			up:1,
		};
		mui.get(api,request,function(res){//关注操作
			if (res.response.code==0){				
			}else{
				mui.alert(res.desc, '系统消息');
			}
		},'json');
	});
	
	//删除
	mui("#sortable").on("tap",".delete",function (event) {
		event.preventDefault();
		event.stopPropagation();
		var nom=$(this).parent().attr("data-no");
		var name=$(this).parent().text(); 
		$(this).parent().parent().remove();
		var str = '<li><div class="item" data-no="'+nom+'">'+name+' <span class="mui-icon mui-icon-plusempty"></span></div></li>';
		$("#channel").prepend(str);

		request = {
			command:10,			
			id:nom,
			column:'AAAA',
			udid:uuid,
			up:0,
		};
		mui.get(api,request,function(res){//关注操作
			if (res.response.code==0){				
			}else{
				mui.alert(res.desc, '系统消息');
			}
		},'json');
	});


})
</script>
</body>
</html>